<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <h1><i></i>智慧河长制综合管理平台</h1>
    </div>
    <!-- 登陆框 -->
    <el-form ref="account" :model="account" status-icon :rules="rules" label-position="right" label-width="70px" validate-on-rule-change
             class="demo-ruleForm login-container">
      <h3 class="title">欢迎登录</h3>
      <el-form-item prop="loginName" label="用户名">
        <el-input type="text" class="login-input" v-model="account.loginName" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" class="login-input"  v-model="account.password" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="vercode" label="验证码">
        <el-input type="text" class="login-input"  v-model="account.vercode" style="width:125px;" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="submitForm('account')"></el-input>
        <span style="position:relative;">
          <img :src="codeImg" alt="此处为验证码" width="120" height="40" style="vertical-align:middle;margin-left:10px;" @click="chageCode">
          <a v-if="!codeImg" class="refresh-code" href="javascript:;" @click="chageCode">图片看不清？点击重新获取验证码</a>
         </span>
      </el-form-item>
      <el-form-item class="extra-text">
          <el-col :span="12"><el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox></el-col>
          <el-col :span="12" style="text-align:right"><a href="javascript:;" class="forget-pwd" title="找回密码">忘记密码?</a></el-col>
      </el-form-item>
      <el-form-item label-width="0" style="width:100%;">
        <el-button type="primary" style="width:100%;font-size:16px;" @click="submitForm('account')">登录</el-button>
      </el-form-item>
    </el-form>
    <div class="footer">
      <p class="footer-msg">&copy;CopyRight 2018中移物联网 版本：v1.0.2</p>
    </div>
  </div>
</template>
<script>
  import $storage from '@/api/localStorageData.js'
  export default {
    data() {
      var validateAccount = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          if (this.account.loginName !== '') {
            this.account.loginName = value;
          }
          callback();
        }
      };
	    var validatePwd = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.account.password !== '') {
            this.account.password = value;
          }
          callback();
        }
      };
      var valitadeCode = (rules,value,callback) =>{
        if(value === ''){
          callback(new Error('请输入验证码'))
        } else {
          if ( this.account.vercode !==''){
            this.account.vercode=value
          }
          callback()
        }
      };
    return {
      account: {
        loginName: '',
        password: '',
        vercode:''
      },
      rules: {
        loginName: [
          { required: true, validator: validateAccount, trigger: 'blur' },
        ],
        password: [
          {required: true, validator: validatePwd, trigger: 'blur'}
        ],
        vercode:[
          {required:true,validator:valitadeCode,trigger:'blur'}
        ]
      },
      checked: true,
      codeImg:'',
    }
  },
  mounted() {
    this.getCode();
    this.fillForm();
  },
  methods: {
    //记住密码勾选,下次登录直接读取密码
    fillForm(){
       if(this.$Cookies.get('loginName')){
           this.account.loginName=this.$Cookies.get('loginName')
          this.account.password=this.$Cookies.get('password')
       }
    },  
    //获取验证码         
    getCode(){
      this.loginRequest("/api/captcha/kaptcha")
              .then(res => {
                var data = res.data;
                if (data.status == 200) {
                  this.codeImg = 'data:image/jpeg;base64,'+data.data;
                  this.account.captchaToken = data.authToken;
                } else {
                  this.$message.error(data.msg);
                }
                this.loading = false;
              })
              .catch(error => {
                //错误信息
                this.$message.error(error);
              });
    },
    //刷新验证码
    chageCode() {   
      this.getCode()
    },
    //提交登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let pass=this.account.password;
          this.account.password=this.$md5(this.account.password);
          this.account.loginType='web';
          this.loginRequest('/api/user/dologin',this.account).then((res)=>{
            var data = res.data;
            if(data.status===200){
              this.$message.success('登录成功');
              //判断是否勾选记住密码
              if(this.checked==true){
                //记住则将用户名和密码放在cooke中，时间 7天
               this.$Cookies.set('loginName', this.account.loginName, { expires: 7 });
               this.$Cookies.set('password', pass, { expires: 7 });
              }else{
                 this.$Cookies.remove('loginName');
                 this.$Cookies.remove('password');
              } 
              //本地localStorage中存储authToken和user
              $storage.add('authToken',data.authToken)
              $storage.add('user',data.data)
              setTimeout(()=>{
                   this.$router.push('/')               
                 },2000) 
            }else{
              this.$message.error(data.msg);
              this.account.password=pass;
              this.chageCode()
            }
          }).catch((err)=>{
            this.$message.error('网络故障，请检查');
            this.chageCode()
          })
        }else {
          return false;
        }
      });
    },  
  }
}
</script>
<style >
.header{position:fixed;top:0;width:100%;background-color:#15273d;color:#fff;height:80px;line-height:80px;text-align:center}
.header h1{padding-left:60px;font-size:24px}
.header h1 i{display:inline-block;width:50px;height:50px;background:url(../../assets/imgs/logo.png) no-repeat;vertical-align:middle;margin-right:10px}
.login-container{-webkit-border-radius:5px;border-radius:5px;-moz-border-radius:5px;background-clip:padding-box;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-159px;font-size:14px;width:400px;padding:35px 35px 15px 35px;background:#fff;border:1px solid #eaeaea;box-shadow:0 0 5px #cac6c6}
.login-container .title{margin:0 auto 20px auto;text-align:center;color:#505458;font-size:20px}
.login-input .el-input__inner{height:40px!important;line-height:40px!important}
.login-container .el-button{margin-top:10px}
.extra-text{position:relative;margin-bottom:0;padding-left:2px}
.extra-text a{color:#585858;font-size:14px;padding-bottom:10px}
.extra-text a:hover{color:#0085d0}
.extra-text .reg-text{position:absolute;top:4px;right:2px}
.footer{position:fixed;left:0;bottom:0;height:30px;width:100%}
.refresh-code{position:absolute;right:0;top:31px;line-height:16px;font-size:12px;display:inline-block;width:200px;text-align:right;color:red}
</style>
